<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="/lib/swiper/css/swiper.min.css">
        <!-- <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.css"> -->
          <link rel="stylesheet" href="/lib/font/iconfont.css">
          <!-- <link rel="stylesheet" href="/css/tools.css">
          <link rel="stylesheet" href="/css/head.css">
          <link rel="stylesheet" href="/css/headSearch.css">
          <link rel="stylesheet" href="/css/index.css">
          <link rel="stylesheet" href="/css/footer.css">
          <link rel="stylesheet" href="/css/sider.css"> -->
          <script src="/lib/jquery/jquery-3.2.1.js" ></script>
          <!-- <script src="/lib/bootstrap/js/bootstrap.js" ></script> -->
          <script src="/lib/swiper/js/swiper.min.js" ></script>
          <script src="/lib/requirejs/require.js" data-main="../js/index"></script>
          
          
		<link rel="stylesheet" type="text/css" href="/css/index.css"/>
	</head>
	<body>

    <div class="sider-left">
        
    </div>
    
    <div class="header"></div>

<!-- 滚动效果 -->
    <div class="floor_nav hidden" id="floor_nav" >
      <ul>
        <li class="t4"><em class="no1"></em><p>闪购</p></li>
        <li class="t4 current"><em class="no2"></em><p>热门活动</p></li>
        <li class="t4"><em class="no3"></em><p>人气爆款</p></li>
        <li class="t4"><em class="no4"></em><p>分类推荐</p></li>
      </ul>
    </div>

    
        
    
    <div class="header-wrap">
            <div></div>
            <div>
                <input class="sea_input" type="text" name="content" id="textfield" placeholder="请输入商品或品牌"> 
                <button type="submit" class="sea_submit" >搜索</button>

                
                <div id="search_result_search_fm" class="suggest" >
                 </div>


                <ul><li>热搜榜：</li><li><a href="#">悦诗风吟</a></li><li><a href="#">面霜</a></li><li><a href="#">兰芝</a></li><li><a href="#">面膜</a></li><li><a href="#">化妆水</a></li><li><a href="#">唇膏/口红</a></li><li><a href="/htm/cart.html">BB霜</a></li></ul>
            </div>
            <div class="head_cart" id="header_cart">
              <a class="tit" href="/html/cart.html"><i class="iconfont icon-gouwuche" ></i>购物车<i class="iconfont icon-arrow" ></i></a>
              
              </div>
        </div>


        
       <div class="he-nav">
         <div class="he-nav-bd">
           <p class="qqqqq"> 全部商品分类</p>
             
              <div class="main_cate_l" id="main_cate_l">
                  <ul>
                  <li data-index="0">
                  <h3><a href="javascript:;">护肤</a></h3>
                  <div class="bd">
                <a href="/html/list.html">面膜</a>
                <a href="/html/list.html">面膜</a>
                <a href="/html/list.html">面膜</a>
                <a href="/html/list.html">面膜</a>
                <a href="/html/list.html">面膜</a>
                <a href="/html/list.html">面膜</a>
                <a href="/html/list.html">面膜</a>
                <a href="/html/list.html">面膜</a>
                  </div>
                  </li>
                  <li data-index="1">
                  <h3><a href="javascript:;">彩妆</a></h3>
                  <div class="bd">
                  <a href="/html/list.html">BB霜</a>
                  <a href="/html/list.html">BB霜</a>
                  <a href="/html/list.html">BB霜</a>
                  <a href="/html/list.html">BB霜</a>
                  <a href="/html/list.html">BB霜</a>
                  <a href="/html/list.html">BB霜</a>
                  <a href="/html/list.html">BB霜</a>
                  <a href="/html/list.html">BB霜</a>
                  </div>
                  </li>
                  </ul>
                  <ul class="other">
                  <li data-index="2">
                  <h3><a href="javascript:;">日化清洁</a></h3>
                  <div class="bd">
                      <a href="/html/list.html">日常护理</a>
                      <a href="/html/list.html">日常护理</a>
                      <a href="/html/list.html">日常护理</a>
                      <a href="/html/list.html">日常护理</a>
                  </div>
                  </li>
                  <li data-index="3">
                  <h3><a href="javascript:;">健康保养</a></h3>
                  <div class="bd">
                      <a href="/html/list.html">日常护理</a>
                      <a href="/html/list.html">日常护理</a>
                      <a href="/html/list.html">日常护理</a>
                      <a href="/html/list.html">日常护理</a>
                  </div>
                  </li>
                  <li data-index="4">
                  <h3><a href="javascript:;">化妆工具</a></h3>
                  <div class="bd">
                  <a target="_blank" href="http://www.lizi.com/itemSearch/search?category=554dad6ae4b0a4e489d1af1e">化妆刷</a>
                  <a target="_blank" href="http://www.lizi.com/itemSearch/search?category=554dad6ae4b0a4e489d1af20">化妆棉</a>
                  <a target="_blank" href="http://www.lizi.com/itemSearch/search?category=554dad6ae4b0a4e489d1af1f">粉扑/洁面扑</a>
                  </div>
                  </li>
                  </ul>
                  </div>
          
            <a href="/html/list.html">60秒闪购</a>
            <a href="/html/list.html">手机丽子</a>
         </div>
       </div>
             


              <div class="swiper-container" id="ding" >
                  <div class="swiper-wrapper" >
                    <div class="swiper-slide">
                      <!-- Required swiper-lazy class and image source specified in data-src attribute -->
                      <img src="/img/banner/11ee3acb09aa3.jpg" class="swiper-lazy">
                      <!-- Preloader image -->
                      <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
                    </div>
                    <div class="swiper-slide">
                      <img src="/img/banner/179c7377982af.jpg" class="swiper-lazy">
                      <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
                    </div>
                    <div class="swiper-slide">
                      <img src="/img/banner/28a95bd556482.jpg" class="swiper-lazy">
                      <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
                    </div>
                    <div class="swiper-slide">
                      <img src="/img/banner/dc47170a39d.jpg" class="swiper-lazy">
                      <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
                    </div>
                    <div class="swiper-slide">
                        <img src="/img/banner/28a95bd556482.jpg" class="swiper-lazy">
                        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
                      </div>
                  </div >
                  <!-- Add Pagination -->
                  
                  <div class="swiper-pagination swiper-pagination-white" ></div>
                  <!-- Navigation -->
                  <div class="swiper-button-next swiper-button-white"  name="sh" id="show1" style="margin-right:300px;  "></div>
                  <div class="swiper-button-prev swiper-button-white" id="show2"
                  style="margin-left:300px;"></div>
                  <div class="yingyi1" id="yy">1</div>
                  <div class="yingyi2">2</div>
                </div>


                <div class="index_webintro">
                  <a href="http://www.lizi.com/active/zpbz.html" target="_blank">
                  <img src="/img/pc/webintro.png"  >
                  </a>
                </div>

                <div class="index">
                  <div><strong style="color: #34495e;font-size: 28px;">热门活动</strong><span style="font-size:14px; margin-left:20px;color:#d4b39e">只要您不满意就无条件退货</span></div>
                </div>

                <div class="indexlizi">
                  <ul>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                  </ul>

                </div>



                <div class="indexer">
                    <div><strong style="color: #34495e;font-size: 28px;">分类推荐</strong><span style="font-size:14px; margin-left:20px;color:#d4b39e">万千用户信赖</span></div>
                  </div>
  
                  <div class="indexerlizi">
                    <ul>
                      
                    </ul>
  
                  </div>



              <footer></footer>




              <script type="text/html" id="index-template">
              {{each da item }}

                <div class="xiangqing">
              <a href="/html/list.html"> 
                
                <img src="{{item.img}}" alt="">
                <p class="text">{{item.title}}</p> 
              </a>
              <p class="cle">
                  <span>￥</span><span class=" price">{{item.price}}.00</span>

                  <i class="iconfont icon-huo"></i>
              <span class="hot">{{item.hot}}</span>
               </p>
                </div>


              

              {{/each}}
              
              </script>
              <!-- <script>
               window.onload=function(){
                  console.log( $(".he-nav-bd p")[0]);
               $(".he-nav .he-nav-bd p")[0].onmousemove=function(){
                console.log("mmm");
         
                  $(".he-nav .he-nav-bd .main_cate_l")[0].style.display="block";
         
               }
              }
               </script> -->
                
                
                
                
                
                
                
                <script>
               var a=document.getElementById("show1");
                var c=$("#show2")[0];
                var b=document.getElementById("ding");
                var d=$(".yingyi1")[0];
                var e=$(".yingyi2")[0];
                console.log(e)
                b.onmouseover=function(){
                  a.style.display='block';
                  c.style.display='block';
                  $(d).show();
                  $(e).show();
                }
                b.onmouseout=function(){
                  a.style.display='none';
                  c.style.display='none';
                  d.style.display='none';
                  e.style.display='none';
                }
                </script>
                <!-- Swiper JS -->
                
              
                <!-- Initialize Swiper -->
                <script>
                  var swiper = new Swiper('.swiper-container', {
                    autoplay:true,
                    // Enable lazy loading
                    lazy: true,
                    pagination: {
                      el: '.swiper-pagination',
                      clickable: true,
                    },
                    navigation: {
                      nextEl: '.swiper-button-next',
                      prevEl: '.swiper-button-prev',
                    },
              
                  });
                </script>




<script >

    var aa=  $(".indexlizi").offset();
    var t4=$(".t4")
  
    $(window).on("scroll" ,(res)=>{
     
      var top=$(window).scrollTop()
      if(top>400){
      $("#floor_nav").removeClass("hidden")
      }
      if(top<400){
      $("#floor_nav").addClass("hidden")
      }

      t4.each((index,element)=>{
      var end=aa.top+600*index;
      console.log(end)
       console.log( $(window).scrollTop())
      if(end<top+400&&top+400<end+600){
       
        $(element).addClass("ac")
        $(element).removeClass("bc")
      }

      if(end+600<top+400 || end>top+400 ){
              $(element).removeClass("ac")
             }
      
      })

    })

  

 

    t4.each((index,element)=>{
      
      console.log(index)
      console.log(element)
      var end=aa.top+600*index;
      if(end<$(window).scrollTop()+700){
        console.log("sssssssssss")
        $(element).addClass("ac")
}



      // var start=$(window).scrollTop()
      // 	var end=aa.top+600*index;
     
      $(element).on("click" ,()=>{
        var start=$(window).scrollTop()
        
        console.log(end)
       
        function animate(start,end){
      	var dis=end-start;
        console.log("1010");
      	clearInterval(this.timer);
      	this.timer = setInterval(function(){
          console.log("1010")
      			var speed = end-start > 0 ?  Math.ceil((end-start)/10) : Math.floor((end-start)/10);
      			start += speed;
      			//控制窗口滚动条的位置，分别为x,y坐标
      			// window.scrollTo(0,end);
            $(window).scrollTop(start)
      			if(start == end)
      				clearInterval(timer);
            
      		},25); 

        }

        // $(".t4").removeClass("bc")
        // // // $(window).scrollTop(a.top+600*index)
        $(element).addClass("bc")
        animate(start,end);
        
      } )
    })
    
    
    
    
    
      
      // var LocationFloorList=document.getElementsByClassName('LocationFloorList')[0];
      // var aLi=LocationFloorList.getElementsByTagName('li');
      // var aFloor=document.getElementsByClassName('floor');
        
      
      // window.onscroll=function(){
        
      // 	//显示楼层编号-------------------------------------------------
      // 	var scrolltop=document.documentElement.scrollTop || document.body.scrollTop;
      // 	// console.log(scrolltop)
      // 	if(scrolltop>100){
      // 		LocationFloorList.style.display='block';
      // 	}else{
      // 		LocationFloorList.style.display='none';
      // 	};
        
      // 	// 根据楼层滚动位置，定位编号------------------------------------------------
      // 	for(var j=0; j<aFloor.length; j++){
          
      // 		aFloor[j].index=j;
      // 		console.log(aFloor[j].index)
      // 		if(aFloor[j].offsetTop<scrolltop+400){//400为接近屏幕的敏感区
      // 			for(var l=0; l<aFloor.length; l++){
      // 				aLi[l].className='';
      // 			};
      // 			aLi[aFloor[j].index].className='ac';
      // 		}
      // 	};
      // };
      
      // //点击编号，跳转到相对楼层-----------------------------------------------
      // for(var i=0; i<aFloor.length; i++){
      // 	aLi[i].index=i;
      // 	aLi[i].onclick=function(){
      // 		var start=document.documentElement.scrollTop || document.body.scrollTop;
      // 		var end=aFloor[this.index].offsetTop;
      // 		animate(start,end);
      // 	}
      // };
      // //animate-------------------------------------------------------
      // var timer;
      // function animate(start,end){
      // 	var dis=end-start;
      // 	var count=parseInt(1500/30);
      // 	var n=0;
      // 	clearInterval(timer);
      // 	timer = setInterval(function(){
      // 			var speed = end-start > 0 ?  Math.ceil((end-start)/10) : Math.floor((end-start)/10);
      // 			start += speed;
      // 			//控制窗口滚动条的位置，分别为x,y坐标
      // 			// window.scrollTo(0,end);
      // 			window.scrollTo(0,start);
      // 			if(start == end)
      // 				clearInterval(timer);
            
      // 		},30); 
      // };
      
      
    
    
    
    
    </script>
	</body>
</html>
